<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>dsfs</title>
    </head>
    <style>
        *{margin: 0;padding: 0;}
        div{height: 400px;}
        #box{position: absolute;top: 0;left:0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);display: none;z-index: 999;}
        @media screen and (min-width:1024px) {
            div{background: red;}
        }
        @media screen and (min-width:320px)and (max-width:1024px) {
            div{background: yellow;}
        }
        @media screen and (max-width:320px) {
            div{background: green;}
        }
        @media all and (orientation:landscape) {
            #box{display: block;}
        }
    </style>

<body>
<div></div>
<div id="box">请竖放手机</div>
</body>
</html>

